/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
/******************************************************** MENU BUTTONS */
.s-menu-button {
    // Formerly .btn-menu
    @extend .s-button;
    span.l-click-area {
        // In markup, this element should not enclose anything.
        @extend .abs;
    }

    .icon {
        font-size: 16px;
    }

    .title-label {
        margin-left: $interiorMarginSm;
    }

    .icon-swatch,
    .color-swatch {
        // Used in color menu buttons in toolbar
        $d: 10px;
        display: inline-block;
        border: 1px solid rgba($colorBtnFg, 0.2);
        height: $d; width: $d;
        line-height: $d;
        vertical-align: middle;
        margin-left: $interiorMarginSm;
        margin-top: -2px;
        &:not(.no-selection) {
            border-color: transparent;
        }
    }

    &:after {
        // Adds the downward facing 'context available / invoke menu' arrow element
        @include contextArrow();
        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
    }

    &.create-button {
        @extend .icon-plus;
        .title-label {
            font-size: 1rem;
        }
    }

    .menu {
        left: 0;
        text-align: left;
    }
}

/******************************************************** MENUS THEMSELVES */
.menu-element {
    cursor: pointer;
    position: relative;
}

.s-menu {
    border-radius: $basicCr;
    @include containerSubtle($colorMenuBg, $colorMenuFg);
    @include boxShdw($shdwMenu);
    @include txtShdw($shdwMenuText);
    padding: $interiorMarginSm 0;
}

.menu {
    border-radius: $basicCr;
    @include containerSubtle($colorMenuBg, $colorMenuFg);
    @include boxShdw($shdwMenu);
    @include txtShdw($shdwMenuText);
    padding: $interiorMarginSm 0;
    display: block;
    position: absolute;
    z-index: 10;
    ul {
        @include menuUlReset();
        li {
            box-sizing: border-box;
            border-top: 1px solid pullForward($colorMenuBg, 10%);
            color: $colorMenuFg;
            line-height: $menuLineH;
            padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
            position: relative;
            white-space: nowrap;
            &:first-child {
                border: none;
            }
            &:hover {
                background: $colorMenuHovBg;
                color: $colorMenuHovFg;
                &:before {
                    color: $colorMenuHovIc;
                }
            }
            &:before {
                @extend .ui-symbol;
                @extend .type-icon;
                @extend .icon;
                display: inline-block;
                left: $interiorMargin * 2;
            }
        }
    }
}

.menu,
.icon-menu,
.context-menu,
.super-menu,
.s-menu-button .menu {
    pointer-events: auto;
    ul li {
        a.menu-item-a {
            color: $colorMenuFg;
            display: block;
        }
        &:before,
        a.menu-item-a:before {
            color: $colorMenuIc;
            left: $interiorMargin;
        }
    }
}

.checkbox-menu {
    // Used in search dropdown in tree
    @extend .context-menu;
    ul li {
        padding-left: 50px;
        .checkbox {
            $d: 0.7rem;
            position: absolute;
            left: $interiorMargin;
            top: ($menuLineH - $d) / 1.5;
            em {
                height: $d;
                width: $d;
                &:before {
                    font-size: 7px !important;
                    height: $d;
                    width: $d;
                    line-height: $d;
                }
            }
        }
        &:before {
            // Type icon
            left: 25px;
        }
    }
}

.super-menu,
.super-menu > mct-representation,
.super-menu > .contents {
    box-sizing: border-box;
    display: block;
    position: relative;
}

.super-menu {
    $plw: 50%;
    $prw: 100% - $plw;
    position: absolute;
    .w-menu {
        align-items: stretch;
        display: flex;
        flex-direction: row;
        margin: $interiorMarginLg;
    }
    .col {
        box-sizing: border-box;
        flex: 1 1 auto;
        overflow-x: hidden;
        &.menu-items {
            border-right: 1px solid pullForward($colorMenuBg, 10%);
            overflow-y: auto;
            padding-right: $interiorMargin;
            width: $plw;
            ul {
                li {
                    border-radius: $controlCr;
                    padding-left: 30px;
                    border-top: none;
                }
            }
        }
        &.menu-item-description {
            $p: $interiorMargin * 3;
            overflow-y: hidden;
            padding: $p $p 0 $p;
            width: $prw;

            .desc-area {
                &.icon {
                    color: $colorCreateMenuLgIcon;
                    position: relative;
                    text-align: center;
                }
                &.title {
                    color: $colorCreateMenuText;
                }
                &.description {
                    color: pushBack($colorCreateMenuText, 20%);
                    font-size: 0.8em;
                    line-height: 1.5em;
                }
            }
        }
    }

    .w-title-desc {
        display: flex;
        flex-direction: column;
        overflow: hidden; // Height set in specific menu instances
    }

    // Specific menu instances
    &.l-create-menu {
        width: 500px;
        .col {
            max-height: 70vh;
        }
        .w-title-desc {
            height: 190px;
        }
        .desc-area {
            &.icon {
                font-size: 8em;
                height: 135px;
                margin-bottom: $interiorMargin * 3;
            }
            &.title {
                font-size: 1.2em;
                margin-bottom: $interiorMargin * 2;
            }
        }
    }

    &.mini {
        width: 400px;
        .col {
            max-height: 50vh;
            &.menu-items {
                font-size: 0.8em;
            }
            &.menu-item-description {
                $p: $interiorMargin * 2;
                padding: $p $p 0 $p;
            }
        }
        .w-title-desc {
            height: 180px;
        }
        .desc-area {
            &.icon {
                font-size: 4em;
                height: 70px;
                margin-bottom: $interiorMargin * 3;
            }
            &.title {
                font-size: 1em;
                margin-bottom: $interiorMargin * 2;
            }
        }
    }
}

.context-menu {
    font-size: 0.80rem;
}

.context-menu-holder,
.menu-holder {
    position: absolute;
    z-index: 120;
    .context-menu-wrapper {
        position: absolute;
        height: 100%;
        width: 100%;
    }
    &.go-left .context-menu,
    &.go-left .menu {
        right: 0;
    }
    &.go-up .context-menu,
    &.go-up .menu {
        bottom: 0;
    }
}

.context-menu-holder {
    pointer-events: none;
    height: 200px;
    width: 170px;
}

.btn-bar.right .menu,
.menus-to-left .menu {
    z-index: 79;
    left: auto;
    right: 0;
    width: auto;
}

.menus-up .menu {
    bottom: $btnStdH;
    top: auto;
}
